<template>
  <div>
    <!-- <HelloWorld msg="Hello Vue 3.0" @onSayHello="sayHello"/> -->
    <!-- <life-cycles :msg="msg" v-if="flag"/> -->
    <!-- <Ref/> -->
    <!-- <ToRef/> -->
    <!-- <ToRefs/> -->
    <!-- <RefTemplate/> -->
    <!-- <WhyRef/> -->
    <!-- <VModel/> -->
    <!-- <MousePosition v-if="flag"/> -->
    <!-- <Watch/> -->
    <!-- <GetInstance/> -->
    <ToRefsForDeepObj />

    <hr />
    <button @click="changeHandler">change msg</button>
    <button @click="changeFlagHandler">change flag</button>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import LifeCycles from "./components/LifeCycles.vue";
import Ref from "./components/Ref.vue";
import ToRef from "./components/ToRef.vue";
import ToRefs from "./components/ToRefs.vue";
import RefTemplate from "./components/RefTemplate.vue";
import WhyRef from "./components/WhyRef.vue";
import VModel from "./components/VModel/index.vue";
import MousePosition from "./components/MousePosition/index.vue";
import Watch from "./components/Watch.vue";
import GetInstance from "./components/GetInstance.vue";
import ToRefsForDeepObj from "./components/ToRefsForDeepObj.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
    LifeCycles,
    Ref,
    ToRef,
    ToRefs,
    RefTemplate,
    WhyRef,
    VModel,
    MousePosition,
    Watch,
    GetInstance,
    ToRefsForDeepObj,
  },

  data() {
    return {
      msg: "hello vue3",
      flag: true,
    };
  },

  methods: {
    changeHandler() {
      this.msg = "hello vue3" + Date.now();
    },

    changeFlagHandler() {
      this.flag = !this.flag;
    },

    sayHello(info) {
      console.log("hello", info);
    },
  },
};
</script>
